<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>非常实用的js全屏右键菜单插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="css/default.css">-->
	<!--<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">-->
	<!--<link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Roboto:400,100,300,500">-->
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!--[if IE]>
		<!--<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>-->
	<![endif]-->
</head>
<body>
	<menu class="menu">
	    <li class="menu-item">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-folder-open"></i>
	            <span class="menu-text">Open</span>
	        </button>
	    </li>
	    <li class="menu-item disabled">
	        <button type="button" class="menu-btn">
	            <span class="menu-text">Open in New Window</span>
	        </button>
	    </li>
	    <li class="menu-separator"></li>
	    <li class="menu-item">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-reply"></i>
	            <span class="menu-text">Reply</span>
	        </button>
	    </li>
	    <li class="menu-item">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-star"></i>
	            <span class="menu-text">Favorite</span>
	        </button>
	    </li>
	    <li class="menu-item submenu">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-users"></i>
	            <span class="menu-text">Social</span>
	        </button>
	        <menu class="menu">
	            <li class="menu-item">
	                <button type="button" class="menu-btn">
	                    <i class="fa fa-comment"></i>
	                    <span class="menu-text">Comment</span>
	                </button>
	            </li>
	            <li class="menu-item submenu">
	                <button type="button" class="menu-btn">
	                    <i class="fa fa-share"></i>
	                    <span class="menu-text">Share</span>
	                </button>
	                <menu class="menu">
	                    <li class="menu-item">
	                        <button type="button" class="menu-btn">
	                            <i class="fa fa-twitter"></i>
	                            <span class="menu-text">Twitter</span>
	                        </button>
	                    </li>
	                    <li class="menu-item">
	                        <button type="button" class="menu-btn">
	                            <i class="fa fa-facebook-official"></i>
	                            <span class="menu-text">Facebook</span>
	                        </button>
	                    </li>
	                    <li class="menu-item">
	                        <button type="button" class="menu-btn">
	                            <i class="fa fa-google-plus"></i>
	                            <span class="menu-text">Google Plus</span>
	                        </button>
	                    </li>
	                    <li class="menu-item">
	                        <button type="button" class="menu-btn">
	                            <i class="fa fa-envelope"></i>
	                            <span class="menu-text">Email</span>
	                        </button>
	                    </li>
	                </menu>
	            </li>
	        </menu>
	    </li>
	    <li class="menu-separator"></li>
	    <li class="menu-item">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-download"></i>
	            <span class="menu-text">Save</span>
	        </button>
	    </li>
	    <li class="menu-item">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-edit"></i>
	            <span class="menu-text">Rename</span>
	        </button>
	    </li>
	    <li class="menu-item">
	        <button type="button" class="menu-btn">
	            <i class="fa fa-trash"></i>
	            <span class="menu-text">Delete</span>
	        </button>
	    </li>
	</menu>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>非常实用的js全屏右键菜单插件 <span>在屏幕的任何地方右键点击查看菜单效果</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201506292129.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
	</div>
	
	<script type="text/javascript">
	var menu = document.querySelector('.menu');
	function showMenu(x, y){
		console.log("1");
	    menu.style.left = x + 'px';
	    menu.style.top = y + 'px';
	    menu.classList.add('show-menu');
	}
	function hideMenu(){
		console.log("2");
	    menu.classList.remove('show-menu');
	}
	function onContextMenu(e){
		console.log("3");
	    e.preventDefault();
	    showMenu(e.pageX, e.pageY);
	    document.addEventListener('mousedown', onMouseDown, false);
	}
	function onMouseDown(e){
		console.log("4");
	    hideMenu();
	    document.removeEventListener('mousedown', onMouseDown);
	}

	document.addEventListener('contextmenu', onContextMenu, false);

	</script>
</body>
</html>